<!--  -->
<template>
  <div class="course-list-wrap">
    <!-- 顶部导航栏-->
    <van-sticky class="my-TopBar">
      <van-nav-bar
        title="我的课程"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
      <!-- 类型导航 -->
      <van-tabbar
        class="typenav"
        v-model="active"
        active-color="#87d4eb"
        @change="onTagChange"
      >
        <van-tabbar-item v-for="item in data.typeNav" :key="item">{{
          item.tag
        }}</van-tabbar-item>
      </van-tabbar>
    </van-sticky>
    <!--进行中课程-->
    <div class="commonWrap courseItmeWrap course-goingOn">
      <van-cell title="进行中课程">
        <template #icon>
          <van-icon name="todo-list" size="20px" color="#87d4eb"></van-icon>
        </template>
      </van-cell>
      <course-item3 :data="data.courseGoingOn"></course-item3>
    </div>
    <!-- 重复组件，仅数据不同!-->
    <div class="commonWrap courseItmeWrap course-goingOn">
      <van-cell title="已结束课程">
        <template #icon>
          <van-icon name="todo-list" size="20px" color="#87d4eb"></van-icon>
        </template>
      </van-cell>
      <course-item3 :data="data.courseEnding"></course-item3>
    </div>
  </div>
  <!-- 课程列表-->
</template>

<script>
import { reactive, getCurrentInstance, ref } from "vue";
import CourseItem3 from "@/components/Course/user/CourseItem3.vue";
export default {
  setup() {
    const { ctx, proxy } = getCurrentInstance();
    const active = ref(0);
    const state = reactive({
      value1: 0,
      value2: "a",
    });

    const data = reactive({
      typeNav: [
        {
          tag: "全部",
        },
        {
          tag: "自然科学",
        },
        {
          tag: "社会科学",
        },
        {
          tag: "人文科学",
        },
        {
          tag: "生命科学",
        },
        {
          tag: "其他",
        },
      ],
      courseGoingOn: [],
      courseEnding: [],
    });

    function onClickLeft() {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push("/search");
    }
    function handleChange() {
      proxy.$router.push("/Course/UserCourse");
    }
    //根据课程标签获取课程
    function onTagChange(val) {
      // const that = this.data;
      if (!window.sessionStorage.getItem("token")) {
        Dialog.alert({
          title: "提示",
          message: "请登录查看更多精彩课程",
        }).then(() => {
          // on close
        });
      } else {
        console.log(window.sessionStorage.getItem("token"));
        console.log(active.value);
        if (val === 0 && window.sessionStorage.getItem("token")) {
          proxy.$axios.course
            .getCourseByName({
              pageNo: 1,
              pageSize: 1000,
              str: "",
            })
            .then((res) => {
              if (res.status === 200) {
                console.log(res.data.data.records[0].courseTag);
                data.courseGoingOn =  res.data.data.records;
              }
            });
        } else {
          // console.log(val+1);
          // console.log(window.sessionStorage.getItem('token'));
          proxy.$axios.course
            .getCourseByTag({
              tags: data.typeNav[val].tag,
              pageNo: val + 1,
              pageSize: 100,
              token: window.sessionStorage.getItem("token"),
            })
            .then((res) => {
              if (res.status === 200) {
                console.log(res);
                data.courseGoingOn= res.data.data.records;
                console.log(data.courseList);
              } else {
                console.log("请求失败");
              }
            });
        }
      }
    }
    // function onTagChange() {
    //   const that = this.data;
    //   proxy.$axios.course.getCourseByTag().then((res) => {
    //     if (res.status === 200) {
    //       that.courseGoingOn = that.res.data.data.records;
    //     }
    //   });
    // }
    function mygetCourseList() {
      proxy.$axios.course
        .getAllCourse({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            data.courseGoingOn = res.data.data.records;
            data.courseEnding = res.data.data.records;
          }
        });
    }
    return {
      active,
      state,
      data,
      onClickLeft,
      handleChange,
      onTagChange,
      mygetCourseList,
    };
  },
  // methods: {
  //   close
  // },
  components: {
    CourseItem3,
  },
  created() {
    // 获取推荐课程or所有课程？
    // 访问接口
    this.mygetCourseList();
  },
};
</script>
<style lang="scss" scoped>
.course-list-wrap {
  .typenav {
    margin-top: 2px;
    height: 25px;
    bottom: auto;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  }
}
.course-goingOn {
  margin: 40px $margin-horizon;
  overflow: hidden;
  .van-cell {
    font-weight: 550;
    .van-icon {
      height: 10px;
    }
  }
}
</style>
